<template>
  <div class="exams">
    <!-- 重写一下逻辑： 对于使用它的组件只需要传递一个topics即可，而该组件会自动渲染 -->
    <ul v-for="(val, k) in topics" :key="k">
      <li v-for="item in val" :key="item.key">
        <!-- <span>{{ val }} -- {{ k }}</span> -->
        <!-- 如果是单选 -->
        <single-choice
          v-if="k == 'singleChoice'"
          :topic="item"
          :finish="finish"
        ></single-choice>
        <!-- 如果是多选 -->
        <multiple-choice
          v-else-if="k == 'multipleChoice'"
          :topic="item"
          :finish="finish"
        ></multiple-choice>
        <!-- 判断 -->
        <true-or-false
          v-else-if="k == 'trueOrFalse'"
          :topic="item"
          :finish="finish"
        ></true-or-false>
        <!-- 填空 -->
        <blank-question
          v-else-if="k == 'blank'"
          :topic="item"
          :finish="finish"
        ></blank-question>
        <!-- 问答 -->
        <essay-question
          v-else-if="k == 'essay'"
          :topic="item"
          :finish="finish"
        ></essay-question>
      </li>
    </ul>
  </div>
</template>

<script>
/**
 * TODOS:
 * 1. 没有序号计算，有些组件的order都不见了
 * 2. 报看
 * 3. 未支持到答题卡，感觉答题卡反而复杂了。
 */
import SingleChoice from "@/components/question_types/SingleChoice.vue";
import MultipleChoice from "@/components/question_types/MultipleChoice.vue";
import TrueOrFalse from "@/components/question_types/TrueOrFalse.vue";
import BlankQuestion from "@/components/question_types/BlankQuestion.vue";
import EssayQuestion from "@/components/question_types/EssayQuestion.vue";
export default {
  props: ["topics", "finish"],
  components: {
    SingleChoice,
    MultipleChoice,
    TrueOrFalse,
    BlankQuestion,
    EssayQuestion,
  },
  methods: {
    handleClick(choice) {
      this.topic.choice = choice;
      this.topic.opts.forEach((v) => {
        // v.order===choice.order?v.selected=true:v.selected=false
        v.selected = false;
      });
      choice.selected = true;
    },
    // 通过传递索引
    // 感觉又有问题，完成的方法不应该在父元素身上而应该在子元素身上，父元素只需要把done值改了，就像现在这样其实，没问题。

    // finish(eIndex) {
    //   // 获取项
    //   this.topics[eIndex].done = true;
    // },
  },
};
</script>

<style lang="less" scoped>
.exams {
  background-color: #fff;
  ul {
    list-style: none;
    li {
    }
  }
}
</style>